<template>
     <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
        <button @click="searchUsers">Search</button>
      </div>
    </section>
</template>

<script>
import axios from 'axios'
export default {
    name:'Search',
    data(){
        return{
            keyWord:''
        }
    },
    methods:{
        searchUsers(){
            //請求成功前更新List的數據
            this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
            axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                response =>{
						//console.log('succussful',response.data.items)
                        //請求成功後更新List的數據(因List.vue中的第三十七行,所以不用按照順序寫)
                         this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
					},
					error=>{
						console.log('error',error.message)
                        //請求失敗後更新List的數據
                         this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})

					}
            )
        }
    }
}
</script>